<template>
	<view>
		<view class="header">
			<view>
				<u-icon name="arrow-leftward" color="white" :class="active ? 'active' : ''" @tap="back" size="20">
				</u-icon>
				<text>{{userMessage.nickname}}</text>
			</view>
			<view>
				<image @tap="share = true" src="../../static/Major-icon/searchdiandian1.png" mode=""></image>
			</view>
		</view>
		<!-- 背景图 -->
		<view class="bg">
			<image @tap="showImg(userMessage.backgroundUrl)" :src="userMessage.backgroundUrl" mode=""></image>
		</view>
		<!-- 用户头像信息等 -->
		<view class="userMessage">
			<view>
				<image :src="userMessage.avatarUrl" mode="widthFix"></image>
				<text style="padding: 40rpx 0 ;">{{userMessage.signature}}</text>
			</view>
			<view class="message-right">
				<view class="msg">
					<view>
						<text>{{userMessage.followeds}}</text>
						<text>粉丝</text>
					</view>
					<view>
						<text>{{userMessage.follows}}</text>
						<text>关注</text>
					</view>
					<view>
						<text>Lv.8</text>
						<text>粉丝</text>
					</view>
				</view>
				<view class="btn">
					<button>编辑信息</button>

				</view>
			</view>
		</view>
		<!-- 歌单 -->
		<view class="songlist">
			<text>歌单({{songlist.length}})</text>
			<view class="list" @tap="send(item.id)" v-for="(item,index) in songlist" :key="item.id">
				<view>
					<image :src="item.coverImgUrl" mode=""></image>
				</view>
				<view class="list-right">
					<text>{{item.name}}</text>
					<view>
						<text>{{item.trackCount}}首，</text>
						<text>by,{{item.creator.nickname}},</text>
						<text>播放{{item.playCount | count}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUser,
		UserPlaylist
	} from '@/network/user.js';
	export default {
		data() {
			return {
				share: false, //分享按钮
				userMessage: [],
				songlist: [],
				active: false
			};
		},
		methods: {
			getUserMessage() {
				UserPlaylist(this.userMessage.userId).then(res => {
					if (res.code !== 200) return this.showToast('请求失败', 'none')
					this.songlist = res.playlist;
				})
			},
			back() {
				uni.navigateBack({
					data: 1
				})
			}, //返回主页
			send(id) {
				uni.navigateTo({
					url: "../recommendationList/recommendationList?id=" + id
				})
			}, //跳转到 list 详情页
		},
		filters: {
			count(v) {
				return v > 100000 || v > 100000000 ? (v / 10000).toFixed(1) + '万次' : v + '次'
			}
		},
		created() {
			this.userMessage = uni.getStorageSync("userData")
			this.getUserMessage()
		}
	}
</script>

<style lang="scss" scoped>
	.active {
		color: black !important;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.tanchuan {
		background-color: red;
	}

	// 头部
	.header {
		z-index: 999;
		display: flex;
		height: 100upx;
		align-items: center;
		padding: 30upx 30upx;
		justify-content: space-between;
		position: fixed;
		width: 100%;
		top: 0;

		text {
			color: white;
			margin-left: 20upx;
		}

		view {
			display: flex;
			align-items: center;

			image {
				width: 60upx;
				height: 60upx
			}
		}
	}

	// 背景图
	.bg {
		width: 100%;

		image {
			width: 100%;
		}
	}

	// 用户头像信息等
	.userMessage {
		display: flex;
		justify-content: space-between;
		padding: 0 30upx;
		box-sizing: border-box;
		align-items: center;
		margin-top: 20upx;

		.message-right {
			width: 100%;
			margin-left: 10px;
		}

		image {
			width: 200upx;
			height: 200upx;
			border-radius: 50%;
			border: 1px solid #dadada;
		}

		.btn {
			padding-top: 20upx;

			button {
				width: 100%;
				height: 50upx !important;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30upx;
				border-radius: 20px;
				border: 1PX solid #D8D7D5;
				background-color: #EFEEEC
			}

			uni-button::after {
				border: none !important;
			}
		}

		>view {
			flex-direction: column;
			display: flex;

			.msg {
				display: flex;
				align-items: center;
				justify-content: center;

				>view {
					display: flex;
					margin: 0 30upx;
					align-items: center;
					flex-direction: column;
					font-size: 16upx;
					color: #7B7B7B;
				}
			}
		}
	}

	.msg>view text:nth-child(1) {
		font-size: 20upx;
		color: black;
		text-align: center;
		font-weight: 600;
	}

	// 歌单
	.songlist {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		width: 90%;
		margin: 0 auto;
		padding: 30upx;
		margin-top: 20px;
		border-radius: 10px;

		.list {
			display: flex;
			align-items: center;
			margin-top: 20upx;

			image {
				border-radius: 10px;
				width: 50px;
				height: 50px;
			}

			.list-right {
				margin-left: 20upx;
				display: flex;
				flex-direction: column;
			}

			.list-right>view {
				color: #9A9A9A;
				font-size: 15upx !important;

			}
		}
	}

	page {
		background-color: #F5F5F5;
		font-family: STZhongsong;
	}

</style>
